<template>
<div>
  <div class="input">
    <span class="" @click="isShow=true">{{date || '请选择日期'}}</span>
  </div>
<div class="cover" v-show="isShow" @click.prevent.stop="isShow=false">
 <div class="demo-picker-container" @click.stop="stopHandle">
   <mu-divider></mu-divider>
    <mu-flexbox>
      <mu-flexbox-item>
        <mu-flat-button class="t3" label="取消" @click="isShow=false"/>
      </mu-flexbox-item>
      <mu-flexbox-item class="center f20">
        {{title || '请选择日期'}}
      </mu-flexbox-item>
      <mu-flexbox-item class="text-right">
         <mu-flat-button label="确定" primary @click="selectConfirm"/>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-picker :slots="addressSlots" :visible-item-count="5" @change="addressChange" :values="address"/>
</div>
</div>
</div>
</template>

<script>
export default {
  mounted () {
    if (!this.date) {
      const d = new Date()
      this.currentYear = String(d.getFullYear())
      this.currentMonth = d.getMonth() > 9 ? String(d.getMonth()) : ('0' + (d.getMonth() + 1))
      this.currentDay = String(d.getDate())
      this.address = [this.currentYear, this.currentMonth, this.currentDay]
      return
    }
  },
  model: {
    prop: 'date',
    event: 'datechang'
  },
  props: ['title', 'date'],
  watch: {
    date (v) {
      if (!v) {
        return
      }
      this.address = this.date.split('-')
      this.currentYear = this.address[0]
      this.currentMonth = this.address[1]
      this.currentDay = this.address[2]
    }
  },
  data () {
    return {
      isShow: false,
      addressSlots: [
        {
          width: '100%',
          textAlign: 'center',
          values: this.createYears()
        },
        {
          width: '100%',
          textAlign: 'center',
          values: this.createMonths()
        },
        {
          width: '100%',
          textAlign: 'center',
          values: this.createDays()
        }
      ],
      address: ['', '', ''],
      currentYear: '',
      currentDay: '',
      currentMonth: ''
    }
  },
  methods: {
    createYears () {
      let temp = []
      for (let i = 0; i < 119; i++) {
        temp.push(String(1900 + i))
      }
      return temp
    },
    createMonths () {
      let temp = []
      for (let i = 1; i < 13; i++) {
        temp.push(String(i > 9 ? i : '0' + i))
      }
      return temp
    },
    createDays (days = 31) {
      let temp = []
      for (let i = 1; i <= days; i++) {
        temp.push(String(i > 9 ? i : '0' + i))
      }
      return temp
    },
    addressChange (value, index) {
      switch (index) {
        case 0:
          this.currentYear = value
          break
        case 1:
          // debugger
          this.currentMonth = value
          if (['01', '03', '05', '07', '08', '10', '12'].indexOf(value) > -1) {
            this.addressSlots.splice(2, 1, {
              values: this.createDays(),
              width: '100%',
              textAlign: 'center'
            })
          } else if (['04', '06', '09', '11'].indexOf(value) > -1) {
            this.addressSlots.splice(2, 1, {
              values: this.createDays(30),
              width: '100%',
              textAlign: 'center'
            })
          } else {
            // 闰年2月28天
            let value = this.createDays(29)
            if (this.currentYear % 4 === 0 && this.currentYear % 100 !== 0) {
              value = this.createDays(28)
            }
            this.addressSlots.splice(2, 1, {
              values: value,
              width: '100%',
              textAlign: 'center'
            })
          }
          console.log(this.addressSlots[2])
          break
        case 2:
          this.currentDay = value
          break
      }
      this.address = [this.currentYear, this.currentMonth, this.currentDay]
    },
    selectConfirm () {
      console.log(this.address)
      this.isShow = false
      this.$emit('datechang', this.address.join('-'))
    },
    stopHandle () {
      // todo
    }
  }
}
</script>
<style scoped>
.cover {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.demo-picker-container{
  z-index: 11;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
  transition: all .4s;
}
</style>

